<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card">
      <el-form ref="listQueryForm" :model="listQuery" :inline="true">
        <el-form-item label="项目名称" prop="title">
          <el-input
            v-model="listQuery.title"
            placeholder="请输入项目名称"
            clearable
            size="small"
            style="width: 180px"
            @keyup.enter.native="getList"
          />
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="timeValue"
            clearable
            size="small"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getList"
          >搜索</el-button>
          <el-button
            icon="el-icon-refresh"
            size="small"
            @click="resetQuery"
          >重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="handleClear"
          >清空回收站</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        border
        :data="ticketList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="#" type="index" width="80" align="center" />
        <el-table-column
          label="项目名称"
          prop="title"
          :show-overflow-tooltip="true"
          align="center"
        />
        <el-table-column
          label="流程"
          prop="process_name"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="当前状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>
              {{ scope.row.state_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="当前处理人" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.is_end === 0">{{
              scope.row.principals
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="是否结束"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.is_end === 0"
              size="mini"
              type="success"
            >否</el-tag>
            <el-tag v-else size="mini" type="danger">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="上报时间"
          align="center"
          prop="create_time"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="300"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleView(scope.row)"
            >查看</el-button>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-time"
              @click="handleHistoryView(scope.row)"
            >审批历史</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-position"
              @click="handleResume(scope.row)"
            >恢复</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              class="del-btn"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <HistoryDialog ref="historyDialog" />
    <ReviewDialog ref="reviewDialog" @refreshTable="getList" />
  </div>
</template>

<script>
import {
  deleteWorkOrder,
  resumeWorkOrder,
  clearWorkOrder
} from '@/api/xjs/work-order'
import { recyclingList } from '@/api/xjs/ns-order'
import HistoryDialog from '@/views/xjsxxm/components/history'
import ReviewDialog from '@/views/xjsxxm/annual/components/review'
// 搜索
import WorkOrderSearch from './admin/components/search/index'
import { parseTime } from '@/utils'
export default {
  name: 'DashboardAdmin',
  components: {
    WorkOrderSearch,
    HistoryDialog,
    ReviewDialog
  },
  data() {
    return {
      processId: 2,
      timeValue: '',
      dialogVisible: false,
      queryParams: {},
      total: 0,
      loading: false,
      ticketList: [],
      listQuery: {
        title: '',
        page: 1,
        per_page: 10
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQueryForm')
      this.getList()
    },
    getList() {
      this.loading = true
      if (
        this.timeValue === null ||
        this.timeValue === undefined ||
        this.timeValue === ''
      ) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = parseTime(this.timeValue[0])
        this.listQuery.endTime = parseTime(this.timeValue[1])
      }
      this.listQuery.page = this.queryParams.pageIndex
      this.listQuery.per_page = this.queryParams.pageSize
      this.listQuery.classify = 7
      this.listQuery.process = 2
      recyclingList(this.listQuery).then(response => {
        this.ticketList = response.data.data
        this.queryParams.pageIndex = response.data.page
        this.queryParams.pageSize = response.data.per_page
        this.total = response.data.total_count
        this.loading = false
      })
    },

    handleView(row) {
      this.$refs.reviewDialog.open(row.process, row.id)
    },
    handleHistoryView(row) {
      this.$refs.historyDialog.open(row.process, row.id)
    },
    handleResume(row) {
      this.$confirm('是否恢复该申请数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          resumeWorkOrder(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '恢复成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleClear() {
      this.$confirm('此操作将永久清空该回收站内的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          clearWorkOrder(this.processId).then(response => {
            this.$message({
              type: 'success',
              message: '清空成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },

    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteWorkOrder(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },

    handleSelectionChange() {}
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

::v-deep .el-tabs__item {
  padding-left: 16px !important;
  height: 50px;
  line-height: 50px;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.leaderboard {
  height: 448px;
  overflow: auto;
}
</style>
